<template>
  <div id="app">
    <!-- 按钮盒子 -->
    <div>
      <div class="btn-box">
        <div>
          <andre-button type="primary" @click="onClick" disabled
            >按钮</andre-button
          >
        </div>
        <div>
          <andre-button type="success" disabled>按钮</andre-button>
        </div>
        <div>
          <andre-button type="info">按钮</andre-button>
        </div>
        <div>
          <andre-button type="warning">按钮</andre-button>
        </div>
        <div>
          <andre-button type="danger">按钮</andre-button>
        </div>
      </div>
      <div class="btn-box">
        <div>
          <andre-button type="primary" :plain="true">按钮</andre-button>
        </div>
        <div>
          <andre-button type="success" :plain="true">按钮</andre-button>
        </div>
        <div>
          <andre-button type="info" :plain="true">按钮</andre-button>
        </div>
        <div>
          <andre-button type="warning" :plain="true">按钮</andre-button>
        </div>
        <div>
          <andre-button type="danger" :plain="true">按钮</andre-button>
        </div>
      </div>
      <div class="btn-box">
        <div>
          <andre-button type="primary" :round="true">按钮</andre-button>
        </div>
        <div>
          <andre-button type="success" :round="true">按钮</andre-button>
        </div>
        <div>
          <andre-button type="info" :round="true">按钮</andre-button>
        </div>
        <div>
          <andre-button type="warning" :round="true">按钮</andre-button>
        </div>
        <div>
          <andre-button type="danger" :round="true">按钮</andre-button>
        </div>
      </div>
      <div class="btn-box">
        <div>
          <andre-button type="primary" :plain="true" :round="true"
            >按钮</andre-button
          >
        </div>
        <div>
          <andre-button type="success" :plain="true" :round="true"
            >按钮</andre-button
          >
        </div>
        <div>
          <andre-button type="info" :plain="true" :round="true"
            >按钮</andre-button
          >
        </div>
        <div>
          <andre-button type="warning" :plain="true" :round="true"
            >按钮</andre-button
          >
        </div>
        <div>
          <andre-button type="danger" :plain="true" :round="true"
            >按钮</andre-button
          >
        </div>
      </div>
      <div class="btn-box">
        <div>
          <andre-button type="primary" :circle="true">点</andre-button>
        </div>
        <div>
          <andre-button type="success" :circle="true">点</andre-button>
        </div>
        <div>
          <andre-button type="info" :circle="true">点</andre-button>
        </div>
        <div>
          <andre-button type="warning" :circle="true">点</andre-button>
        </div>
        <div>
          <andre-button type="danger" :circle="true">点</andre-button>
        </div>
      </div>
      <div class="btn-box">
        <div>
          <andre-button
            type="primary"
            :circle="true"
            icon="yanjing"
          ></andre-button>
        </div>
        <div>
          <andre-button
            type="success"
            :circle="true"
            icon="guanbi"
          ></andre-button>
        </div>
        <div>
          <andre-button
            type="info"
            :circle="true"
            icon="huanyipi"
          ></andre-button>
        </div>
        <div>
          <andre-button
            type="warning"
            :circle="true"
            icon="search"
          ></andre-button>
        </div>
        <div>
          <andre-button type="danger" :circle="true" icon="app4"></andre-button>
        </div>
        <div>
          <andre-button type="primary" :circle="true" icon="Aa"></andre-button>
        </div>
        <div>
          <andre-button
            type="success"
            :circle="true"
            icon="zhinanzhen"
          ></andre-button>
        </div>
        <div>
          <andre-button
            type="info"
            :circle="true"
            icon="line-quillpenyumaobi"
          ></andre-button>
        </div>
      </div>
    </div>
    <!-- dialog盒子 -->
    <div>
      <andre-button type="primary" @click="visible = true"
        >打开Dialog</andre-button
      >
      <andre-dialog title="我是标题" :visible.sync="visible">
        <template v-slot:title>
          <h3>我是标题</h3>
        </template>
        测试测试
        <template v-slot:foot>
          <andre-button @click="visible = false">取消</andre-button>
          <andre-button type="success">确定</andre-button>
        </template>
      </andre-dialog>
    </div>
    <!-- input盒子 -->
    <div style="margin-top: 20px">
      <andre-input
        style="width: 200px"
        v-model="userName"
        clearable
      ></andre-input>
      <div>{{ userName }}</div>
      <andre-input
        style="width: 200px"
        type="password"
        v-model="password"
        showPassword
        clearable
      ></andre-input>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      visible: false,
      userName: '12312',
      password: 516564
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    onClick () {
      console.log('点击了')
    },
    onClose (value) {
      this.visible = value
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang="scss">
.btn-box {
  margin-bottom: 20px;
  display: flex;
  div {
    margin-right: 20px;
  }
}
</style>
